<template>
  <a-card bordered>
    <a-row style="margin-bottom: 2%;">
      <a-col span="24">
        <span style="font-size: 16px;margin-right: 10px;"> 当前模式:</span>
        <a-space size="large">
          <a-radio-group v-model="configData" button-style="solid" @change="choseChange">
            <a-radio-button value="aliyun">
              阿里云短信服务
            </a-radio-button>
<!--            <a-radio-button value="hwcloud">-->
<!--              华为云短信服务-->
<!--            </a-radio-button>-->
          </a-radio-group>
        </a-space>
      </a-col>
    </a-row>
    <a-row>
      <a-col span="8" style="padding: 15px;">

        <a-card hoverable>
          <img
            slot="cover"
            alt="example"
            :src="imgUrl.ali"
            width="300px"
            height="200px"
          />
          <template slot="actions" class="ant-card-actions">
            <a-tooltip>
              <template slot="title">
                设置
              </template>
              <a-icon key="setting" type="setting" style="font-size: 20px;"
                      :spin="spin.ali"
                      @mouseover="mouseOver(1)"
                      @mouseleave="mouseLeave(1)"
                      @click="goToAlibabaModal(false)"/>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">
                详情
              </template>
              <a-icon key="search" type="search" style="font-size: 20px;" @click="goToAlibabaModal(true)"/>
            </a-tooltip>
          </template>
          <a-card-meta description="将通过阿里的API查询物流轨迹">
            <template slot="title">
              阿里云短信服务
              <a-tag color="green" v-if="configData=='aliyun'">
                运行
              </a-tag>
              <a-tag color="red" v-else>
                停止
              </a-tag>
            </template>
            <a-avatar
              slot="avatar"
              :src="imgUrl.ali"
            />
          </a-card-meta>
        </a-card>

      </a-col>
<!--      <a-col span="8" style="padding: 15px;">-->

<!--        <a-card hoverable>-->
<!--          <img-->
<!--            slot="cover"-->
<!--            alt="example"-->
<!--            :src="imgUrl.hw"-->
<!--            width="300px"-->
<!--            height="200px"-->
<!--          />-->
<!--          <template slot="actions" class="ant-card-actions">-->
<!--            <a-tooltip>-->
<!--              <template slot="title">-->
<!--                设置-->
<!--              </template>-->
<!--              <a-icon key="setting" type="setting" style="font-size: 20px;"-->
<!--                      :spin="spin.hw"-->
<!--                      @mouseover="mouseOver(2)"-->
<!--                      @mouseleave="mouseLeave(2)"-->
<!--                      @click="goToTencentModal(false)"/>-->
<!--            </a-tooltip>-->
<!--            <a-tooltip>-->
<!--              <template slot="title">-->
<!--                详情-->
<!--              </template>-->
<!--              <a-icon key="search" type="search" style="font-size: 20px;" @click="goToTencentModal(true)"/>-->
<!--            </a-tooltip>-->
<!--          </template>-->
<!--          <a-card-meta description="将通过腾讯的API查询物流轨迹">-->
<!--            <template slot="title">-->
<!--              华为云短信服务-->
<!--              <a-tag color="green" v-if="configData=='hwcloud'">-->
<!--                运行-->
<!--              </a-tag>-->
<!--              <a-tag color="red" v-else>-->
<!--                停止-->
<!--              </a-tag>-->
<!--            </template>-->
<!--            <a-avatar-->
<!--              slot="avatar"-->
<!--              :src="imgUrl.hw"-->
<!--            />-->
<!--          </a-card-meta>-->
<!--        </a-card>-->

<!--      </a-col>-->
    </a-row>
    <ali-sms-modal ref="aliRef"></ali-sms-modal>
    <hw-sms-modal ref="hwRef"></hw-sms-modal>
  </a-card>
</template>
<script>
import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";
import ali from "../img/alibaba.jpg"
import hw from "../img/huawei.jpg"
import {ConfigDictMixins} from "@views/gospel/configCenter/mixins/ConfigDictMixins";
import AliSmsModal from "@views/gospel/configCenter/sms/modules/AliSmsModal";
import HwSmsModal from "@views/gospel/configCenter/sms/modules/HwSmsModal";

export default {
  name: "SmsConfig",
  mixins: [BoneCommonMixin, ConfigDictMixins],
  components: {AliSmsModal, HwSmsModal},
  data() {
    return {
      description: "短信配置中心",
      imgUrl: {
        ali: ali,
        hw: hw
      },
      type: "tipSmsChannelConfig",
      url: {
        switchType: "/config/sms/smsMode",
      },
      spin: {
        ali: false,
        hw: false,
      }
    }
  },
  created() {
    this.queryDict();
  },
  methods: {
    goToAlibabaModal(value) {
      this.$refs.aliRef.visible = true;
      this.$refs.aliRef.disable = value;
      this.$refs.aliRef.queryJsonDict();
    },
    goToTencentModal(value) {
      this.$refs.hwRef.visible = true;
      this.$refs.hwRef.disable = value;
      this.$refs.hwRef.queryJsonDict();
    },
    mouseOver: function (value) {
      switch (value) {
        case 1:
          this.spin.ali = true;
          break;
        case 2:
          this.spin.hw = true;
          break;
      }
    },
    mouseLeave: function (value) {
      switch (value) {
        case 1:
          this.spin.ali = false;
          break;
        case 2:
          this.spin.hw = false;
          break;
      }
    }
  }
}
</script>

<style scoped>

</style>